import React, { Fragment,useEffect, useState, useRef,memo } from 'react'

import './index.less';
import SongCard from '../../../SongCard';
import NavigationBar from '../../../NavigationBar';
import downloadJpg from '../../../../assets/img/download.png';
import { Carousel } from 'antd';
import { getBannersAction,getRecommendSongCardAction, getListdetailAction, getToplistsAction, getRecommendProgramdAction } from '../../../../redux/actions/home';
import { connect } from 'react-redux';
import { getListdetailAPI } from '../../../../api/home';
import { NavLink } from 'react-router-dom';
import { getSongListAction } from '../../../../redux/actions/songlist';
import { getHotDjerListAction,getHoursDjerListAction,getNewDjerListAction } from '../../../../redux/actions/djerlist';

const Recommend = memo((props) => {
  let [bgimg, setBgimg] = useState();
  // 轮播图切换
  let swiper1 = useRef();
  let dispatchSwiper1 = (type) => {
    switch (type) {
      case 'prev':
        swiper1.current.prev();
        break;
      case 'next':
        swiper1.current.next();
        break;
    }
  }
  async function getBanner() {
    if (props.banners.length == 0) {
      let res = await props.getBanners();
    }
  }
  function beforeChange(from, to) {
    setBgimg(() => (props.banners[to].imageUrl));
  }


  let swiper2 = useRef();
  let dispatchSwiper2 = (type) => {
    switch (type) {
      case 'prev':
        swiper2.current.prev();
        break;
      case 'next':
        swiper2.current.next();
        break;
    }
  }

  let [toplistdetail_3, setToplistdetail_3] = useState([]);
  async function getToplist() {
    let res = await props.getToplists();
    for (let i = 0; i < 3; i++) {
      getListdetail(res[i].id);
    }
  };
  async function getListdetail(id) {
    let res = await getListdetailAPI(id);
    const data = res.data.playlist.tracks;
    setToplistdetail_3((pre) => [...pre, data.slice(0, 10)]);
  };

  let [sonlist_5, setSongList_5] = useState([]);
  async function getSongList() {
    let res = await props.getSongList();
    const data=res.artists;
    setSongList_5(() => { return data.slice(0, 5); })
  }

  let [hotdjlist_5, setHotdjlist_5] = useState([]);
  async function getHotDjerList() {
    let res = await props.getHotDjerList();
    setHotdjlist_5(() => { return res.list.slice(0,5)});
  }

  async function getRecommendSongCard() {
    props.getRecommendSongCard();
  }

  let [program_3, setProgram_5] = useState([]);
  async function getRecommendProgram() {
    let res = await props.getRecommendProgram();
    setProgram_5((p) => {return res.slice(0,3) })
  }
  useEffect(() => {
    getBanner();
    getToplist();
    getSongList();
    getHotDjerList();
    getRecommendSongCard();
    getRecommendProgram();
  }, [])

  return (
    <div className='myrecommend'>
      <div className="swiper" style={{ backgroundImage: `URL(${bgimg})` }}>
        <div className='swiper_left' onClick={() => dispatchSwiper1('prev')}> {'上'} </div>
        <div className='swiper_right' onClick={() => dispatchSwiper1('next')}>{'下'} </div>
        <div className="swiper_main">
          <Carousel effect="fade" ref={swiper1} dotPosition="bottom" autoplay beforeChange={beforeChange}>
            {props.banners.map((el, index) => {
              return (<div key={index}>
                <img src={el.imageUrl} />
              </div>)
            })}
          </Carousel>
          <div src={downloadJpg} className='donwload' alt="下载网易云客户端" />
        </div>
      </div>
      <div className='myrecommend_main'>
        <div className="myrecommend_main_left">
          <NavigationBar title={"热门推荐"}>
            {[1, 2, 3, 4].map(el => {
              return (<Fragment key={el}>
                <a>华语</a>
                <span>|</span>
              </Fragment>)
            })}
          </NavigationBar>
          <div className="myrecommend_main_left_part myrecommend_main_left_part1">
            {props.recommendSongcard?.slice(0,5).map(el => {
              return <SongCard key={el.id} el={ el}></SongCard>
            })}
            {program_3.map(el => {
              return <SongCard key={el.id} el={ el}></SongCard>
            })}
          </div>
          <div className='fenge_line'></div>

          <NavigationBar title={"新碟上架"}></NavigationBar>
          <div className="myrecommend_main_left_part myrecommend_main_left_part2">
            <span onClick={() => dispatchSwiper2('prev')} className="myrecommend_main_left_part2_button1">{"左"}</span>
            <Carousel className="swiper2" ref={swiper2}>
              {[1, 2].map(el1 => {
                return (<div className="pics" key={el1}>
                  {[1, 2, 3, 4, 5].map(el => {
                    return (<div className="pic" key={el + '1'}>
                      <div>123</div>
                      <span>2</span>
                    </div>)
                  })}
                </div>)
              })}
            </Carousel>
            <span onClick={() => dispatchSwiper2('next')} className="myrecommend_main_left_part2_button2">{"右"}</span>
          </div>
          <div className='fenge_line'></div>

          <NavigationBar title={"榜单"}></NavigationBar>
          <div className="myrecommend_main_left_part myrecommend_main_left_part3">
            {props.toplist&&props.toplist.slice(0, 3).map((el, index) => {
              return (<div key={index} className='myrecommend_main_left_part3_son1'>
                <div className="myrecommend_main_left_part3_header">
                  <NavLink to={'/home/list'} className='header_img'><img src={el.coverImgUrl} alt="" /></NavLink>
                  <div className='header_title'>
                    <NavLink to={'/home/list'}>{el.name}</NavLink>
                    <div className='header_show'>
                      <span></span>
                      <span></span>
                    </div>
                  </div>
                </div>
                <ul>
                  {toplistdetail_3[index] && toplistdetail_3[index].map((el1, index1) => {
                    return (<Fragment key={Math.random()}>
                      <li><span>{index1+1}</span><a>{el1.name}</a></li>
                    </Fragment>)
                  })}
                  <li><a style={{ float: 'right' }}>查看全部{ '>'}</a></li>
                </ul>
              </div>)
            })}

          </div>
          <div className='fenge_line'></div>
        </div>

        {/* 主页右侧区域 */}
        <div className="myrecommend_main_right">
          <div className='myrecommend_main_right_login'>
            <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
            <div className='login'>用户登录</div>
          </div>

          <div className='myrecommend_main_right_songer'>
            <h3 className='myrecommend_main_right_h3'>
              <span>入驻歌手</span>
              <a>查看全部{' >'}</a>
            </h3>
            <div className='songer_cards'>
              <ul>
                {sonlist_5.map(el => {
                  return (<li key={el.id} className="songer_card">
                    <div className="songer_card_left">
                      <img src={el.picUrl} alt="" />
                    </div>
                    <div className="songer_card_right">
                      <div className="songer_name">{ el.name}</div>
                      <div className="songer_introduction fontsingling">{ el.alias.join(',')}</div>
                    </div>
                  </li>)
                })}
              </ul>
            </div>
            <div className="sq_button1">
              <a>申请成为网易音乐人</a>
            </div>

            <h3 className='myrecommend_main_right_h3 myrecommend_main_right_h3_2'>
              <span>热门主播</span>
              <a>查看全部{' >'}</a>
            </h3>
            <div className='songer_cards'>
              <ul>
                {hotdjlist_5.map(el => {
                  return (<li key={el.id} className="songer_card">
                    <div className="songer_card_left">
                      <img src={el.avatarUrl} alt="" />
                    </div>
                    <div className="songer_card_right">
                      <div className="songer_name">{ el.nickName}</div>
                      <div className="songer_introduction fontsingling">热门dj-{ el.nickName}</div>
                    </div>
                  </li>)
                })}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
})



/* ---------------------------redux容器盒子-------------------------- */
const mapStateToProps = (state) => {
  return {
    banners: state.HomeReducer.banners,
    toplist: state.HomeReducer.toplist,
    listdetail: state.HomeReducer.listdetail,
    recommendSongcard: state.HomeReducer.recommendSongcard,
    recommendProgram:state.HomeReducer.recommendProgram,
    songlist: state.SongListReducer,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getBanners: () => dispatch(getBannersAction()),
    getToplists: () => dispatch(getToplistsAction()),
    getRecommendSongCard: () => dispatch(getRecommendSongCardAction()),
    getRecommendProgram: () => dispatch(getRecommendProgramdAction()),
    getListdetails: () => dispatch(getListdetailAction(19723756)),
    getSongList: () => dispatch(getSongListAction(1001)),
    getHotDjerList: () => dispatch(getHotDjerListAction()),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Recommend)